<template>
  <div class="self_bartending_home">
    <c-title :hide="false" text="首页"></c-title>
    <div class="locationSearchBox">
      <div class="location" @click="tolocation">
        <i class="iconfont icon-dizhi1"></i>
        <div class="locTitle">{{ city ? city : "选择定位" }}</div>
        <i class="iconfont icon-icon_down1"></i>
      </div>
      <van-search v-model="keyword" placeholder="附近商家商品" shape="round" @click="toSearchGood" />
        <template slot="left-icon">
          <i class="iconfont icon-sousuo1"></i>
        </template>
      </van-search>
    </div>
    <div class="bannerBox" v-if="swiperArr.length > 0">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <template v-for="(item, index) in swiperArr">
          <van-swipe-item :key="index" v-if="item.rotation_background_url">
            <div class="banner" @click="toBUrl(item)">
              <img :src="item.rotation_background_url" alt="" />
            </div>
          </van-swipe-item>
        </template>
      </van-swipe>
    </div>
    <div v-for="(item, index) in listData" :key="index">
      <div class="desTitle">{{ index }}</div>
      <bartendingGood :list="item" :isLoc="false"></bartendingGood>
    </div>
  </div>
</template>
<script>
import bartendingGood from "./components/bartendingGood.vue";
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      keyword: "",
      swiperArr: [],
      lat: "",
      lng: "",
      city: "",

      listData: [],
      page: 1,
      total_page: 0,
      isLoadMore: false
    };
  },
  activated() {
    this.fun
      .getLocation()
      .then(res => {
        console.log(res, res.city);
        this.lat = res.point.lat;
        this.lng = res.point.lng;
        this.city = res.city;
        this.init();
        this.getData();
      })
      .catch(err => {
        this.init();
        this.getData();
      });

    this.getSwiprt();
  },
  methods: {
    toSearchGood() {
      this.$router.push(this.fun.getUrl("bartend_Store_SearchLoc", {}, { lat: this.lat, lng: this.lng }));
    },
    init() {
      this.page = 1;
      this.listData = [];
      this.total_page = 0;
    },
    async getData() {
      let json = {
        lat: this.lat,
        lng: this.lng,
        // 按商家分组
        is_merchant_group: 1,
        keyword: this.keyword
      };
      let { data, msg, result } = await $http.post("plugin.self-bartending.api.member.store.index", json, "");
      if (result) {
        this.listData = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let json = {
          lat: this.lat,
          lng: this.lng,
          is_merchant_group: 1,
          page: this.page,
          keyword: this.keyword
        };
        let { data, msg, result } = await $http.post("plugin.self-bartending.api.member.store.index", json, "");
        this.isLoadMore = true;
        if (result) {
          let arr = data.data;
          for (let merchant in arr) {
            if (arr.hasOwnProperty(merchant)) {
              if (this.listData[merchant]) {
                // 如果商户已经存在，合并数组
                this.listData[merchant] = this.listData[merchant].concat(arr[merchant]);
              } else {
                // 如果商户不存在，直接赋值
                this.listData[merchant] = arr[merchant];
              }
            }
          }
        } else {
          this.$toast(msg);
          this.page = this.page - 1;
          this.isLoadMore = false;
        }
      }
    },
    async getSwiprt() {
      let { data, msg, result } = await $http.post("plugin.self-bartending.api.member.index.index", {}, "");
      if (result) {
        console.log(data);
        this.swiperArr = data ? data : [];
      } else {
        this.$toast(msg);
      }
    },
    tolocation() {
      this.$router.push(this.fun.getUrl("bartend_o2oLocation", {}, { tag: "selfBartend" }));
    },
    toBUrl(item){
      window.location.href = item.url;
    }
  },
  components: { bartendingGood }
};
</script>
<style lang="scss" scoped>
.desTitle {
  font-weight: bold;
  font-size: 1.06rem;
  color: #00001c;
  margin-left: 0.75rem;
  text-align: left;
  margin-bottom: 0.81rem;
  margin-top: 0.25rem;
}
.self_bartending_home {
  .bannerBox {
    margin: 0.63rem 0.75rem;
    .my-swipe {
      width: 100%;
      height: 10rem;
    }
    .banner {
      height: 10rem;
      background: #ffffff;
      border-radius: 0.5rem;
      img {
        width: 100%;
        height: 10rem;
        border-radius: 0.5rem;
      }
    }
  }
}
.locationSearchBox {
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #fff;
  overflow: hidden;
  .icon-sousuo1 {
    color: #989898;
  }
  .location {
    flex: 1;
    display: flex;
    align-items: center;
    .icon-dizhi1 {
      margin-right: 0.3rem;
    }
    .locTitle {
      font-weight: 400;
      font-size: 0.81rem;
      color: #333333;
    }
    .icon-icon_down1 {
      margin-left: 0.25rem;
      color: #aaaab3;
    }
  }
  .van-search {
    flex-shrink: 0;
    padding: 0;
    width: 13.44rem;
    .van-search__content {
      background: #f5f5f5;
    }
  }
  .search {
    width: 13.44rem;
    height: 2rem;
    display: flex;
    align-content: center;
    .van-cell {
      padding: 0;
      background: #f5f5f5;
    }
  }
}
</style>
